<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ClickHouse实战案例统计</title>
</head>
<body>
<div id="app">
    <h1>ClickHouse实战案例统计</h1>
    请选择商品：
    <select v-model="courseId" @change="searchData">
        <option value="">请选择</option>
        <option value="1">商品1</option>
        <option value="2">商品2</option>
    </select>
    请选择城市：
    <select v-model="province" @change="searchData">
        <option value="">请选择</option>
        <option value="广东">广东</option>
        <option value="湖南">湖南</option>
    </select>
    请选择时间：
    <input type="date" v-model="startTime" @blur="searchData">
    <input type="date" v-model="endTime" @blur="searchData">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
</div>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    var myCharts = {
        loadData(searchParams) {
            axios.post("http://localhost:8080/pc/pv", {...searchParams}).then(res => {
                var results = res.data.data;
                if (results) {
                    var xAxisData = results.map(res => res.province + "_" + res.city)
                    var seriesData = results.map(res => res.pvCount)
                    myCharts.initCharts(xAxisData, seriesData)
                }
            })
        },
        initCharts(xAxisData, seriesData) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ClickHouse实战案例统计-统计每个城市的PV'
                },
                tooltip: {},
                legend: {
                    data: ['PV']
                },
                xAxis: {
                    data: xAxisData
                },
                yAxis: {},
                series: [{
                    name: "PV",
                    type: 'bar',
                    data: seriesData
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }

    const vue = Vue.createApp({
        data() {
            return {
                province:"",
                courseId:"",
                startTime:"",
                endTime:"",
            }
        },
        methods:{
          searchData() {
            myCharts.loadData({
                courseId:this.courseId,
                province:this.province,
                startTime:this.startTime,
                endTime:this.endTime,
            })
          }
        },
        mounted() {
            myCharts.loadData()
        }
    }).mount("#app")
</script>
</body>
</html>